<template>
	<div class="icon">
		<swiper :options="swiperOption">
			<swiper-slide v-for="item of pages">
			    <div class="icon-item" v-for="a of item" :key="a.id" >
				    <img :src="a.img" />
				    <p>{{a.title}}</p>
			    </div>
			</swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				swiperOption:{       			
			        pagination: {
			            el: ".swiper-pagination"
			        },
			        autoplay: {
					    delay: 5000,
					    stopOnLastSlide: false,
					    disableOnInteraction: true,
					}, 
       			},

       			"imgList":[
       				{
       					"id":"1",
       					"img":"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
       					"title":"景点门票"
       				},
       				{
       					"id":"2",
       					"img":"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
       					"title":"一日游"
       				},
       				{
			            "id":"3",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png",
			            "title":"识春赏花"
			          },
			          {
			            "id":"4",
			            "img":"http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/de711920c71e38287d9f95f7910aa1aa.png",
			            "title":"精品小团"
			          },
			          {
			            "id":"5",
			            "img":"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
			            "title":"西安必游"
			          },
			          {
			            "id":"6",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
			            "title":"动植物园"
			          },
			          {
			            "id":"7",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
			            "title":"华清宫"
			          },
			          {
			            "id":"8",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
			            "title":"兵马俑"
			          },
			          {
			            "id":"9",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
			            "title":"泡温泉"
			          },
			          {
			            "id":"10",
			            "img":"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
			            "title":"陕历博"
			          }
       			],
			}

		},
		computed:{
			pages(){
				let page=[];
				this.imgList.forEach((item,index)=>{
					let num=Math.floor(index/8);

					if(!page[num])page[num]=[];

					page[num].push(item)
				});
				return page;
			}
		}
	}
</script>
<style scoped>
	.icon{
		width:100%;	
		background:#fff
	}
	.icon-item{
		width:25%;
		padding-bottom:0.7rem;
		float:left;
	}
	.icon img{
		width: 1.1rem;
	    height: 1.1rem;
	    display: block;
	    margin: 0 auto;
	    padding-top: .2rem;
	}
	.icon p{
		font-size:0.28rem;
		text-align:center;
		margin-top:0.2rem;
	}
</style>